<template lang="pug">
.pdf-view(:style="style")
    .allFull(title="全屏，esc退出全屏" @click="allFull()")
        el-icon(size="16")
            FullScreen
    .close(v-if="showClose" @click="close()")
        el-icon(size="16")
            CloseBold
    VueOfficeDocx(:src="src" @rendered="renderingCompleted" )
</template>

<script setup>
import VueOfficeDocx from '@vue-office/docx'
import '@vue-office/docx/lib/index.css'
import { ref, onMounted, computed } from 'vue'
import dialogModel from '@/components/dialogModel.vue'
import formModel from '@/components/formModel.vue'
import apis from '@/apis'
import { success } from '@/utils/message'
import { watch } from 'less'
const props = defineProps({
    showClose: {
        type: Boolean,
        default: false
    },
    src: {
        type: String,
        src: ''
    },
    pageScale: {
        type: Number,
        default: 100
    }, // 默认自适应展示一页
    theme: {
        type: String,
        default: 'white'
    },
    viewerWidth: {
        type: String,
        default: '100%'
    },
    viewerHeight: {
        type: String,
        default: '100%'
    },
    fileName: {
        type: String,
        default: ''
    }
})
const close = () => {
    emit('close')
}
const emit = defineEmits(['close', 'loaded'])
//定位
const searchLocation = (str) => {
    $('.docx-wrapper').find('p').each((i, val) => {
        if(val.textContent.includes('附件5大观110千伏变电站新建工程电缆层形式比选专题分析')){
            console.log(val)
            $(val).addClass('word-search')
            val.scrollIntoView({
                behavior: 'smooth', // 平滑滚动，如果不需要平滑效果可以设置为'instant'或'auto'
                block: 'center', // 垂直方向对齐方式，这里设置为'center'表示将元素滚动到视口中间
                inline: 'nearest' // 水平方向对齐方式，这里设置为'nearest'表示最接近视口的起始边缘
            })
        }
    })
}
//加载出来
const renderingCompleted = (pdfApp) => {
    // searchLocation('核实平均负载率指标和10kV重过载比例')
    emit('loaded', pdfApp)
}
//全屏
const style = ref({})
const allFull = () => {
    if(style.value.width){
        style.value = {}
    }else{
        style.value = {
            position: 'fixed',
            top: 0,
            left: 0,
            width: '100%',
            height: '100%',
            zIndex: 999999
        }
    }
}

const config = ref({
    sidebar: {
        viewThumbnail: true,
        viewOutline: false,
        viewAttachments: false
    },
    secondaryToolbar: {
        secondaryPresentationMode: true,
        secondaryOpenFile: true,
        secondaryPrint: true,
        secondaryDownload: true,
        secondaryViewBookmark: true,
        firstPage: true,
        lastPage: true,
        pageRotateCw: true,
        pageRotateCcw: true,
        cursorSelectTool: true,
        cursorHandTool: true,
        scrollVertical: true,
        scrollHorizontal: true,
        scrollWrapped: true,
        spreadNone: true,
        spreadOdd: true,
        spreadEven: true,
        documentProperties: true
    },
    toolbar: {
        toolbarViewerLeft: {
            findbar: true,
            previous: true,
            next: true,
            pageNumber: true
        },
        toolbarViewerRight: {
            presentationMode: false,
            openFile: false,
            print: false,
            download: false,
            viewBookmark: false
        },
        toolbarViewerMiddle: {
            zoomOut: true,
            zoomIn: true,
            scaleSelectContainer: true
        }
    },
    errorWrapper: true
})
onMounted(() => {
    //ESC退出全屏
    document.onkeydown = (e) => {
        if(e.keyCode == 27){
            style.value = {}
        }
    }
})
defineExpose({
    searchLocation
    // open
})

</script>

<style lang="less" scoped>
.pdf-view{
    height: 100%;
    width: 100%;
    position: relative;
    background: #fff;
    .close{
        position: absolute;
        top: 6px;
        right: 5px;
        z-index: 2001;
        cursor: pointer;
        background: #fff;
    }
    .allFull{
        position: absolute;
        top: 6px;
        right: 30px;
        z-index: 2001;
        cursor: pointer;
        background: #fff;
    }
}
</style>
<style>
.word-search{
    text-decoration: underline;
    background: #006400;
}
</style>